<template>
  <div class="boardDialog">
    <el-dialog
      :title="id == null ? '新建分组':'编辑分组'"
      v-model="visible"
      width="640px"
      :show-close="true"
      @close="Closed()">
      <div class="content">
        <el-form label-position="left" label-width="98px" ref="ruleForm" :model="form" :rules="rules">
          <el-form-item label="分组名称" prop="name">
            <el-input v-model="form.name" style="width: 420px;" maxlength="10" placeholder="请输入分组名称" />
          </el-form-item>
          <el-form-item label="包含的看板" prop="childrenIds">
            <el-select v-model="form.childrenIds" multiple filterable clearable placeholder="请选择" @change="handleChangeReport" style="width: 420px;">
              <el-option
                v-for="item in boardOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" style="width: 420px;"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="footer">
          <el-button size="mini" @click="Closed">取消</el-button>
          <el-button size="mini" type="primary" @click="handleClickConfirm('ruleForm')">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { 
  merchantReportInsertMerReMenu,
  dataBoardReportMerReMenuInsById 
 } from '@/api/dataCenter/dataBoard.js';
import store from "@/store";
export default {
  name: 'BoardDialog',
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    id: {
      type: Number,
      default: () => {
        return null;
      }
    },
    organizationId: {
      type: Number,
      default: () => {
        return null;
      }
    }
  },
  data() {
    return {
      form: {
        name: '',
        parentId: '',
        sort: '',
        childrenIds: []
      },
      rules: {
        childrenIds: [{ required: true, message: '请选择包含看板', trigger: 'blur' }],
        name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
      },
      boardOptions: []
    }
  },
  watch: {
    visible: {
      handler(val) {
        if(val) {
          this.$nextTick(() => {
            this.$refs.ruleForm.resetFields();
          })
          this.dataBoardReportMerReMenuInsByIdApi(this.organizationId, store.state.user.merchantId)
        }
      }
    }
  },
  mounted() {
    
  },
  methods: {
    // 修饰关闭dialog
    Closed() {
      this.$emit('handleUpdateMenu', true);
      this.$emit('update:visible', false);
    },
    // 根据机构id获取菜单列表Api
    async dataBoardReportMerReMenuInsByIdApi(insId, merchantId) {
      let res = await dataBoardReportMerReMenuInsById({
        insId,
        merchantId,
        id: '1'
      });
      if(res.code === 200) {
        this.boardOptions = []
        res.payload.forEach(item => {
          item.children.forEach(value => {
            this.boardOptions.push(value);
          })
        });
        console.log(this.boardOptions, 'this.boardOptions')
      }
    },
    // 新增分组
    async merchantReportInsertMerReMenuApi() {
      let res = await merchantReportInsertMerReMenu({
        merchantId: store.state.user.merchantId,
        insId: this.organizationId,
        name: this.form.name,
        sort: this.form.sort,
        childrenIds: this.form.childrenIds
      })
      if(res.code === 200) {
        ElMessage({
          type: "success",
          message: "新建分组成功",
        });
        this.Closed();
        this.$emit('handleUpdateMenu', true);
      }
    },
    // 确定
    handleClickConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.id) {
            // 
          } else {
            this.merchantReportInsertMerReMenuApi();
          }
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.boardDialog {

}
</style>